<template>
  <AnalysisWrap titleText="方量分析" info='提示:请首先单击"绘制区域"按钮，再在图上绘制分析区域。' @goAnalysisOtherViewFn="goAnalysisOtherView">
    <template #container>
      <div class="control">
        <span class="lable">基准面高:</span>
        <mars-input-number class="control-input" @change="baseHeight" v-model:value="baseValue" step="0.1" />
        <mars-button v-if="showSelHeight" @click="selHeight">点选高度</mars-button>
      </div>
      <div class="f-mb control">
        <span class="lable">围墙底高:</span>
        <mars-input-number class="control-input" @change="txtMinHeight" v-model:value="bottomValue" step="0.1" />
        <span class="input-info">（可选）</span>
      </div>
      <div class="f-mb control">
        <span class="lable">围墙顶高:</span>
        <mars-input-number class="control-input" @change="txtMaxHeight" v-model:value="topValue" step="0.1" />
        <span class="input-info">（可选）</span>
      </div>
      <div class="control-play">
        <mars-button class="add" @click="analysisMeasure">绘制区域</mars-button>
        <mars-button class="clear" danger @click="clear"> 清除</mars-button>
      </div>
    </template>
  </AnalysisWrap>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue"
import AnalysisWrap from "./analysis-wrap.vue"
import * as mapWork from "./map"

const emit = defineEmits(["goAnalysisOtherView"])

function goAnalysisOtherView(name: string) {
  emit("goAnalysisOtherView", name)
}

onMounted(() => {
  mapWork.onMountedVolume()
})
onUnmounted(() => {
  mapWork.onUnmountedVolume()
  mapWork.eventTarget.off("heightVal", heightVal)
})

const showSelHeight = ref<boolean>(false)

const baseValue = ref<number>()

const bottomValue = ref<number>()

const topValue = ref<number>()

// 方量分析
const analysisMeasure = () => {
  mapWork.analysisMeasure()
}
// 清除
const clear = () => {
  mapWork.clear()

  showSelHeight.value = false
}

// 基础高度修改
const baseHeight = () => {
  mapWork.baseHeight(baseValue.value)
}

// 修改底高
const txtMinHeight = () => {
  mapWork.txtMinHeight(bottomValue.value)
}

// 修改顶高
const txtMaxHeight = () => {
  mapWork.txtMaxHeight(topValue.value)
}

// 点选高度
const selHeight = () => {
  mapWork.selHeight()
}

mapWork.eventTarget.on("heightVal", heightVal)
function heightVal(event: { baseHeight: number; minHeight: number; maxHeight: number }) {
  showSelHeight.value = true
  baseValue.value = event.baseHeight
  bottomValue.value = event.minHeight
  topValue.value = event.maxHeight
}
</script>
<style scoped lang="less">
.control {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  .lable {
    text-align: right;
    width: 60px;
    font-size: 14px;
    text-align: right;
    color: rgba(234, 242, 255, 0.8);
  }
  .control-input {
    width: 146px;
    margin: 0 8px;
  }
  .input-info {
    font-size: 14px;
    color: rgba(234, 242, 255, 0.6);
  }
}

.control-play {
  display: flex;
  .add {
    flex: 1;
  }
  .clear {
    flex: 1;
    margin-left: 10px;
  }
}
</style>
